<template>
  <div class="score">
    <van-row type="flex">
      <van-col span="6">
        <h4>心动评分</h4>
        <h3 v-show="Detail.sc !== 0">{{ Detail.sc }}</h3>
        <h3 v-show="Detail.sc == 0">暂无</h3>
        <p><van-rate v-model="n1" size="12" /></p>
      </van-col>
      <van-col span="6"  class="progress">
        <p><van-rate v-model="n1" disabled color="#ffd21e" :count="5" size="8" /></p>
        <p><van-rate v-model="n2" disabled color="#ffd21e" :count="5" size="8" /></p>
        <p><van-rate v-model="n3" disabled color="#ffd21e" :count="5" size="8" /></p>
        <p><van-rate v-model="n4" disabled color="#ffd21e" :count="5" size="8" /></p>
        <p><van-rate v-model="n5" disabled color="#ffd21e" :count="5" size="8" /></p>
      </van-col>
      <van-col span="4" class="progress">
        <p><van-progress color="#ffc51d" stroke-width="3" :percentage="n1 *10" :show-pivot="false" /></p>
        <p><van-progress  color="#ffc51d" stroke-width="3" :percentage="n2 * 10" :show-pivot="false" /></p>
        <p><van-progress  color="#ffc51d" stroke-width="3" :percentage="n3 * 10" :show-pivot="false" /></p>
        <p><van-progress  color="#ffc51d" stroke-width="3" :percentage="n4 * 10" :show-pivot="false" /></p>
        <p><van-progress  color="#ffc51d" stroke-width="3" :percentage="n5 * 10" :show-pivot="false" /></p>
      </van-col>
      <van-col span="8" class="impersonal">
        <p>
          <span v-show="this.Detail.wish / 10000 >= 1">{{ n6 }}万人想看></span>
          <span v-show="this.Detail.wish / 10000 < 1">{{ n6 }}人想看></span>
        </p>
        <p>
          <span v-show="this.Detail.watched / 10000 >= 1"
            >{{ n7 }}万人看过></span
          >
          <span v-show="this.Detail.watched / 10000 < 1">{{ n7 }}人看过</span>
        </p>
        <p class="van-ellipsis">{{ Detail.src }}</p>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name: "VueMovieScore",
  props: {
    Detail: {
      type: Object / Array,
    },
  },
  data() {
    return {};
  },

  mounted() {},
  computed: {
    n6() {
      if (this.Detail.wish / 10000 < 1) {
        return this.Detail.wish;
      } else {
        return Math.ceil(this.Detail.wish / 10000);
      }
    },
    n7() {
      if (this.Detail.watched / 10000 < 1) {
        return this.Detail.watched;
      } else {
        return Math.ceil(this.Detail.watched / 10000);
      }
    },
    n1() {
      return parseInt(this.Detail.sc / 2);
    },
    n2() {
      return parseInt(this.Detail.sc / this.getRandomInt(1, 5));
    },
    n3() {
      return parseInt(this.Detail.sc / this.getRandomInt(1, 5));
    },
    n4() {
      return parseInt(this.Detail.sc / this.getRandomInt(1, 5));
    },
    n5() {
      return parseInt(this.Detail.sc / this.getRandomInt(1, 5));
    },
  },
  methods: {
    // 随机数
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
  },
};
</script>

<style lang="less" scoped>
.score {
  padding:0 18px 0 18px;

 
  .van-row {
       background-color: #282828;
   
    background-image: 
        radial-gradient(black 15%, transparent 16%), 
        radial-gradient(black 15%, transparent 16%), 
        radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
        radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
    background-position: 
        0 0px, 
        8px 8px, 
        0 1px, 
        8px 9px;
    background-size: 16px 16px;
    padding: 10px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid #ccc;
    .van-col:nth-child(1) {
      h4 {
        color:whitesmoke;
        height: 30px;
        text-align: center;
      }
      h3 {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 30px;
        color: #ffbd1c;
      }
      p {
        text-align: center;
        line-height: 38px;
      }
    }
    .progress {
      p {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        line-height: 20px;
        .van-progress {
          width: 100%;
        }
      }
    }
    .impersonal {
      p {
        color:#786f6f;
        text-align: right;
        height: 33px;
        line-height: 33px;
        font-size: 12px;
      }
       p:nth-child(3){
         font-size: 20px;
         font-weight: 700;
         color:#ffbd1c;
       }
      
    }
  }
}
</style>